<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>大麦商城</title>
	<link href="css/slider.css" rel="stylesheet" type="text/css"/>
	<link href="css/common.css" rel="stylesheet" type="text/css"/>
	<link href="css/cart.css" rel="stylesheet" type="text/css"/>
	<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="/user/login/js/login.js"></script>
	<script src="/js/damai.js"></script>
</head>
<body>
<div id="app">
	<damai ref="dm" @user-change="loginChangeFn">
		<div class="container cart">
			<div class="span24">


				<div class="step step1">
					购物车列表
				</div>
				<table>
					<tbody><tr>
						<th>图片</th>
						<th>商品</th>
						<th>价格</th>
						<th>数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>

					<tr v-for=" c in carts ">
						<td width="60">
							<img :src="c.product.image">
						</td>
						<td>
							<a target="_blank">{{c.product.pname}}</a>
						</td>
						<td>
							￥{{c.product.marketPrice}}.0
						</td>
						<td class="quantity" width="60">
							{{c.count}}
						</td>
						<td width="140">
							<span class="subtotal">￥{{c.product.marketPrice * c.count}}</span>
						</td>
						<td>
							<a href="cart.html?pid=1" class="delete">删除</a>
						</td>
					</tr>

					</tbody></table>

				<dl id="giftItems" class="hidden" style="display: none;">
				</dl>
				<div class="total">
					<em id="promotion"></em>
					<em>
						登录后确认是否享有优惠
					</em>
					赠送积分: <em id="effectivePoint">11017.0</em>
					商品金额: <strong id="effectivePrice">11017.0</strong>
				</div>
				<div class="bottom">
					<a href="cart.html" id="clear" class="clear">清空购物车</a>
					<a href="pay.html" @click.prevent="addOrder" id="submit" class="submit">提交订单</a>
				</div>

			</div>
		</div>
	</damai>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			carts : []
		},
		mounted() {
			// setTimeout(()=>{
			// 	axios.get("order/cart/findByUid",{
			// 		params : {
			// 			uid : this.$refs.dm.$refs.lg.user.uid
			// 		}
			// 	}).then(res=>this.carts = res.data);
			// }, 1000);
		},
		methods : {
			loginChangeFn(user){
				axios.get("order/cart/findByUid",{
					params : {
						uid : user.uid
					}
				}).then(res=>this.carts = res.data);
			},
			addOrder(){
				// 使用 json 对象提交数据, 之前都是表单
				// var p = new URLSearchParams();
				// p.append("a", 100);
				// p.append("b", 'abc');
				// a=100&b=abc
				var order = {};
				order.uid = this.$refs.dm.$refs.lg.user.uid;
				order.orderitems = [];
				this.carts.forEach(cart => {
					var orderitem = {
						pid : cart.pid,
						count : cart.count,
						product : {
							marketPrice : cart.product.marketPrice
						}
					}
					order.orderitems.push(orderitem);
				})
				axios.post("order/order/addOrder", order).then(res=>{
					if(res.data.code){
						location.href = "pay.html?oid=" + res.data.data;
					}
				})
			}
		}
	})
</script>
</body></html>